<template>
  <van-swipe class="work-swipe-content" :show-indicators="false" :autoplay="4000">
    <van-swipe-item>
      <div class="work-head">
        <div class="info">
          <div class="person-avatar">
            <img class="item-img-user" src="~@/assets/imgs/publicline/board/icon-users.png" />
            <img v-if="info.DY_FLAG == '1'" class="item-img-party" src="~@/assets/imgs/publicline/board/icon-party.png" />
          </div>
          <div class="person-message">
            <div class="person-info">
              <span>{{ info.LOGIN_NAME }}</span>
              <span>{{ info.CALC_TYPE_NAME }}</span>
            </div>
            <div class="person-grid">
              <span>{{ info.GRID_TYPE_NAME }}</span>
              <span>{{ info.GRID_NAME }}</span>
            </div>
            <div class="person-text">
              <span>日积分/累计积分</span>
              <span>{{ info.SCO || 0 }}/{{ info.SCO_M || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-swipe-item>
    <!-- <van-swipe-item>
      <div class="bg-container bg1" @click="openPage('1')"></div>
    </van-swipe-item>
    <van-swipe-item>
      <div class="bg-container bg2"></div>
    </van-swipe-item>
    <van-swipe-item>
      <div class="bg-container bg3" @click="openPage('3')"></div>
    </van-swipe-item>
    <van-swipe-item>
      <div class="bg-container bg4" @click="openPage('4')"></div>
    </van-swipe-item> -->
  </van-swipe>
</template>

<script>
import { userInfo } from '@/api/publicline/index.js'

import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { accountDate } from '@/api/common.js'

export default {
  components: {  },
  props: {
    title: {
      type: String
    }
  },
  data() {
    return {
      info: {}
    }
  },
  mounted() {
    this.getAccountDate()
  },
  methods: {
    // 获取日账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.getInfo(result[0].value)
      }
    },
    async getInfo(dayId) {
      const res = await userInfo({ loginId: this.$username || Vue.ls.get(USER_INFO).username, dayId })
      const { result, success } = res
      if(success) {
        this.info = result[0] || {}
        this.info.LOGIN_NAME = Vue.ls.get(USER_INFO).realname;
      }
    },
    openPage( index ) {
      qm.auth.getAccessToken({
        onSuccess:function(res){
          let url = "";
          const params = JSON.stringify({ accessToken: res.accessToken });
          if ( index == '1' ) {
            url = "https://sxyyxt.cn/wocsApp/pages/admin/AMyCustomer/ASxyg.html?_data=" + encodeURI(params);
            qm.jump.openNewBrowser({ url } );
            return;
          }
          if ( index == '3' ) {
            url = "https://sxyyxt.cn/wocsApp/pages/admin/AMyCustomer/ABzyDaySxyg.html?_data=" + encodeURI(params);
            qm.jump.openNewBrowser({ url } );
            return;
          }
          if ( index == '4' ) {
            url = "https://sxyyxt.cn/wocsApp/pages/admin/AMyCustomer/AqzDay.html?_data=" + encodeURI(params);
            qm.jump.openNewBrowser({ url } );
            return;
          }
        },
        onError:function(res){
          Toast.fail({
            message: "获取用户token失败！"
          })
        }
      });
    }
  }
}
</script>
<style lang="less" scoped>
.work-swipe-content {
  .work-head {
    background-image: url('~@/assets/imgs/publicline/index/top_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom;
    // margin-bottom: 12px;
    padding-top: 30px;
    .title {
      text-align: center;
      color: #fff;
      padding-top: 20px;
      font-size: 18px;
      font-weight: 600;
    }
    .info {
      margin: 0 10px 0;
      padding: 20px 0 8px 20px;
      border-radius: 8px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      box-shadow: 0 2px 6px #b1d8ff;

      .person-avatar {
        position: relative;
        width: 70px;
        height: 70px;
        margin-right: 10px;
        border-radius: 36px;
        border: 1px solid #ccc;
        .item-img-user {
          width: 69px;
          height: 69px;
        }
        .item-img-party {
          position: absolute;
          left: -8px;
          width: 30px
        }
      }
      .person-message {
        .person-info > span {
          line-height: 25px;
          vertical-align: bottom;

          &:first-child {
            font-size: 18px;
          }
          &:last-child {
            font-size: 12px;
            border-radius: 2px;
            color: #4D98FF;
            padding: 1px 6px;
            margin-left: 6px;
            border: 1px solid #4d98ff;
            border-radius: 3px 8px 3px 8px;
            vertical-align: text-top;
          }
        }
        .person-grid {
          font-size: 13px;
          margin-top: 5px;
          margin-bottom: 10px;
          span {
            &:first-child {
              background: #32D0B4;
              border-radius: 2px;
              color: #fff;
              padding: 1px 6px;
              margin-right: 6px;
              line-height: 18px;
              display: inline-block;
            }
            &:last-child {
              color: #666;
            }
          }
        }
        .person-text {
          font-size: 13px;
          margin-bottom: 1px;
          line-height: 18px;
          > span {
            &:first-child { 
              color: #666;
              margin-right: 20px;
            }
            &:last-child {
              color: #4D98FF;
            }
          }
        }
      }
    }
  }
  .bg-container {
    background-repeat: no-repeat;
    background-size: cover;
    height: 150px;
  }
  .bg1 {
    background-image: url('~@/assets/imgs/publicline/index/sxyg.png');
  }
  .bg2 {
    background-image: url('~@/assets/imgs/publicline/index/zglt.png');
  }
  .bg3 {
    background-image: url('~@/assets/imgs/publicline/index/jhrb.png');
  }
  .bg4 {
    background-image: url('~@/assets/imgs/publicline/index/qzrfz.png');
  }
}
</style>